<html>

<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #cc9900;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}


tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

        tr .plus, tr .minus {
                font-weight: bold;
                padding-left: 18px;
                position: relative;
                }

        tr .plus {
            color: green;
            }

       tr .plus:before {
            border-color: green;
            border-top:none;
            border-left:4px solid transparent;
            border-right:4px solid transparent;
            }

        tr .minus {
            color: red;
            }

        tr .minus:before {
            border-color: red;
            border-bottom:none;
            border-left:4px solid transparent;
            border-right:4px solid transparent;
            }

</style>


 <p>
   <h3>Outstanding Report</h3>
   <tt> From Date:  <input type="date" name="fromdate" ng-model="fromdate" | format : 'dd-MM-yyyy'></tt>
   
   selected date is {{fromdate}}
   Type :<select ng-model="seltype" > 
					<option value="">-- Choose Type --</option>
					<option value="AGENT">AGENT</option>
	 				<option value="CUSTOMER">CUSTOMER</option>
					<option value="CORPORATE">CORPORATE</option>  
					<option value="DISTRIBUTOR">DISTRIBUTOR</option>  
				<!--	<option value="VENDOR">VENDOR</option> -->
		  </select>
		  
   <input type="text" ng-model="name" class="search-query" placeholder="Search"> 
  </br>
 </p>
 		   <tr>
             <td style="text-align:right; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;">						
              <input type="button" name="OutstandingReport" value="Outstanding Report" class="btn btn-sm btn-inverse" ng-click="viewoutst(fromdate)" >
			 
			 <!-- <a href="#/statemnt/" ng-click="viewstmnt(user)" class="btn btn-sm btn-inverse"> -->
               </td>			
            
            <td style="text-align:right; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;">    					
               <input type="button" name="Statement" value="Statement" class="btn btn-sm btn-primary" onclick="ShowStatement()" >    
            </td>    		
            
			 <td colspan="3" style="text-align:center; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;">    					
               <input type="button" name="Invoice" value="Invoice" class="btn btn-sm btn-success" onclick="ShowInvoice()" >    
            </td> 
			
              <td style="text-align:right; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;">
    		    <td><label style="text-align:left; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;"></label></td>    				
	        <td colspan="4" style="text-align:right; font-size:14px; color:#333333; font-weight:bold; vertical-align:middle;">			
                <input type="submit" name="submit" value="Search" class="btn btn-sm btn-info" >					
            </td>
            </tr>

<table class="table table-striped table-condensed table-hover">
  <thead>
    <tr>
      <th><a href="" ng-click="predicate = 'Sr_NO'; reverse=!reverse">Sr No.</a></th>
	<!--  <th><a href="" ng-click="predicate = 'custid'; reverse=!reverse">Custid</a></th> -->
      <th><a href="" ng-click="predicate = 'custdesc'; reverse=!reverse">Name</a></th>
      <th><a href="" ng-click="predicate = 'custtype'; reverse=!reverse">Type</a></th>
      <th><a href="" ng-click="predicate = 'outstdamt'; reverse=!reverse">Amount</a></th>
	  <th>View Details</th>
    </tr>
  </thead>
  
     
  <tbody>
      <tr ng-repeat="user in outstandingmast | filter: name | filter:{custtype:seltype}  | orderBy:predicate:reverse |startingFrom:currentPage*pageSize | limitTo:pageSize" ng-cloak>
      <td>{{user.Sr_NO}}</td>
	  <!-- <td>{{user.custid}}</td> -->
      <td>{{user.custdesc}}</td>
      <td>{{user.custtype}}</td>
      <td ng-class="{ 'plus': user.outstdamt >= 0,'minus': user.outstdamt < 0 }"> {{user.outstdamt}} </a></td>
	  <td><a href="#/statemnt/" ng-click="viewstmnt(user)"> <img src="glyphicons_edit.png" alt="View"/></td> 
		 </tr>
   </tbody>
  </table>
 
 <tt>Total Records = {{outstandingmast.length}}</tt>
 <tfoot>
             Current Page  {{currentPage+1}} of {{outstandingmast.length/pageSize}}
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                              <!--  <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="currentPage=currentPage-1">« Prev</a> 
                                </li>-->
                <button class="btn btn-info"  ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                                
                         <li ng-repeat="n in range(outstandingmast.length)"
                                    ng-class="{active: n == currentPage}"
                                    ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li> 
                    <!--    <li ng-class="{disabled: currentPage >= customermast.length/pageSize - 1 }">
                                    <a href ng-click="currentPage=currentPage+1">Next »</a>  -->
        <button class="btn btn-info"  ng-disabled="currentPage >= outstandingmast.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next »
    </button>
       </li>
      </ul>
    </div>
  </td>
  </tfoot>
     
  </body>


</html>
